<template>
  <headView />
  <div class="min-h-screen bg-gradient-to-br from-orange-50 via-white to-orange-50 py-12">
    <!-- 头部横幅 -->
    <div v-if="!isLoading" class="us-box">
      <div class="joinleft">
        <h1 class="animate-fade-in-up">用心寻找</h1>
        <p class="animate-fade-in-up animation-delay-300">携手寻找 让宠物不再流浪让爱永驻心间</p>
      </div>
      
    </div>
    <div v-else class="container mx-auto px-4 text-center py-16">
      <p class="text-xl text-orange-800">正在加载宠物信息...</p>
    </div>

    <div class="container mx-auto px-4">
      <!-- 宠物卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <router-link
          v-for="dog in paginatedDogs"
          :key="dog.id"
          :to="{ name: 'Detail', params: { id: dog.id } }"
          class="group bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl border border-orange-100"
        >
          <!-- 图片容器 -->
          <div class="relative h-64 overflow-hidden">
            <img 
              :src="dog.picture" 
              :alt="dog.title + '的照片'"
              class="w-full h-full object-cover transform transition-transform duration-300 group-hover:scale-110"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>

          <!-- 信息区域 -->
          <div class="p-6">
            <h2 class="text-xl font-bold text-orange-900 mb-2 group-hover:text-orange-600 transition-colors">
              {{ dog.title }}
            </h2>
            <div class="flex items-center justify-between">
              <span class="text-sm text-orange-700">点击查看详情</span>
              <svg 
                class="w-5 h-5 text-orange-600 transform transition-transform duration-300 group-hover:translate-x-2" 
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
              >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </div>
          </div>
        </router-link>
      </div>

      <!-- 分页控制 -->
      <div v-if="totalPages > 1" class="mt-12 flex justify-center">
        <div class="inline-flex rounded-lg shadow-sm">
          <!-- 左箭头按钮 -->
          <button
            @click="prevPage"
            :disabled="currentPage === 1"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white border border-orange-300 rounded-l-lg"
            :class="[currentPage === 1 ? 'cursor-not-allowed' : 'hover:bg-orange-50']"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </button>

          <!-- 数字页码按钮 -->
          <button
            v-for="page in totalPages"
            :key="page"
            @click="goToPage(page)"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium transition-all duration-300"
            :class="[
              currentPage === page 
                ? 'bg-orange-600 text-white z-10' 
                : 'bg-white text-orange-700 hover:bg-orange-50',
              page === 1 ? 'rounded-none' : '',
              page === totalPages ? 'rounded-r-lg' : '',
              'border border-orange-300',
            ]"
          >
            {{ page }}
          </button>

          <!-- 右箭头按钮 -->
          <button
            @click="nextPage"
            :disabled="currentPage === totalPages"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white border border-orange-300 rounded-r-lg"
            :class="[currentPage === totalPages ? 'cursor-not-allowed' : 'hover:bg-orange-50']"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="paginatedDogs.length === 0 && !isLoading" class="text-center py-16">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-orange-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
        </svg>
        <p class="text-xl text-orange-700">暂无符合条件的宠物</p>
      </div>
    </div>
  </div>
  <fonnter />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import fonnter from '../../components/fonnter.vue';
import headView from '../../components/head.vue';
import { useAnimalStore } from '../../stores/animalStore';

const router = useRouter();
const animalStore = useAnimalStore();

// 分页相关的逻辑
const itemsPerPage = 6;
const currentPage = ref(1);
const isLoading = ref(true); // 加载状态

// 初始化时获取数据
onMounted(async () => {
  try {
    await animalStore.fetchDogs(1, 1);; 
  } catch (error) {
    console.error('Failed to fetch dogs:', error);
  } finally {
    isLoading.value = false; // 完成加载
  }
});

const paginatedDogs = computed(() => {
  if (isLoading.value) return [];
  const start = (currentPage.value - 1) * itemsPerPage;
  return animalStore.dogs.slice(start, start + itemsPerPage);
});

const totalPages = computed(() => {
  if (isLoading.value || !animalStore.dogs.length) return 0;
  return Math.ceil(animalStore.dogs.length / itemsPerPage);
});

function goToPage(page) {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
}

function nextPage() {
  if (currentPage.value < totalPages.value) {
    goToPage(currentPage.value + 1);
  }
}

function prevPage() {
  if (currentPage.value > 1) {
    goToPage(currentPage.value - 1);
  }
}
</script>

<style scoped lang="less">
// 颜色变量
@orange-50: #fff7ed;
@orange-100: #ffedd5;
@orange-200: #fed7aa;
@orange-300: #fdba74;
@orange-400: #fb923c;
@orange-500: #f97316;
@orange-600: #ea580c;
@orange-700: #c2410c;
@orange-800: #9a3412;
@orange-900: #7c2d12;

@orange-light: #fff9f0;
@orange-lighter: #fef3c7;

// 基础样式
.min-h-screen {
  min-height: 100vh;
}

.bg-gradient-to-br {
  background: linear-gradient(135deg, @orange-50 0%, white 50%, @orange-50 100%);
}

// 卡片容器
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 1.25rem;

  @media (max-width: 768px) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

// 卡片样式
.animal-card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid @orange-100;

  &:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);

    .card-image {
      transform: scale(1.1);
    }
  }

  // 图片容器
  .image-container {
    position: relative;
    height: 16rem;
    overflow: hidden;

    .card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &:hover::after {
      opacity: 1;
    }
  }

  // 卡片内容
  .card-content {
    padding: 1.5rem;

    .title {
      font-size: 1.25rem;
      font-weight: 600;
      color: @orange-900;
      margin-bottom: 0.5rem;
      transition: color 0.3s ease;
    }

    .description {
      font-size: 0.875rem;
      color: @orange-700;
      margin-bottom: 1rem;
    }

    .meta-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .view-detail {
        font-size: 0.75rem;
        color: @orange-600;
      }

      .arrow-icon {
        width: 1.25rem;
        height: 1.25rem;
        color: @orange-600;
        transition: transform 0.3s ease;
      }
    }
  }

  &:hover {
    .title {
      color: @orange-600;
    }

    .arrow-icon {
      transform: translateX(0.5rem);
    }
  }
}

// 分页样式
.pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;

  .pagination-container {
    display: inline-flex;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

    button {
      position: relative;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid @orange-300;
      background: white;
      color: @orange-700;
      transition: all 0.3s ease;

      &:first-child {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
      }

      &:last-child {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
      }

      &:hover:not(:disabled) {
        background: @orange-50;
      }

      &:disabled {
        cursor: not-allowed;
        opacity: 0.7;
      }

      &.active {
        background: @orange-600;
        color: white;
        border-color: @orange-600;
        z-index: 10;
      }

      .icon {
        width: 1.25rem;
        height: 1.25rem;
        color: @orange-600;
      }
    }
  }
}

// 空状态
.empty-state {
  text-align: center;
  padding: 4rem 0;

  .empty-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: @orange-400;
  }

  .empty-text {
    font-size: 1.25rem;
    color: @orange-700;
  }
}

// 头部横幅
.us-box {
  width: 100%;
  background: linear-gradient(135deg, @orange-light 0%, @orange-lighter 100%);
  display: flex;
  margin-top: -3rem;
  border-bottom: 1px solid fade(@orange-400, 20%);

  .joinleft {
    padding-top: 5rem;
    padding-left: 4.375rem;
    width: 60%;
    text-align: left;
    height: 15.625rem;

    h1 {
      font-family: 'Arial', sans-serif;
      font-size: 3.125rem;
      font-weight: 600;
      color: @orange-900;
      animation: fadeInUp 1s ease-out;
    }

    p {
      font-size: 1.375rem;
      color: @orange-800;
      animation: fadeInUp 1s ease-out 0.3s both;
    }
  }

  .joinright {
    height: 15.625rem;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      animation: float 6s ease-in-out infinite;
    }
  }
}

// 动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-0.625rem); }
  100% { transform: translateY(0); }
}

// 加载状态
.loading-state {
  text-align: center;
  padding: 4rem 0;

  .loading-text {
    font-size: 1.25rem;
    color: @orange-800;
  }
}
</style>